vue
<template>
    <div
        class="px-4 pt-32"
        id="faq">
        <div class="font-weight-bold text-[32px] text-center mb-10">
            常见问题
        </div>
        <div class="max-w-[1200px] mx-auto">
            <div class="relative light-circle">
                <div class="m-collapse">
                    <div
                        @click="itemClick(item, index)"
                        v-for="(item, index) in fqaList"
                        :key="index"
                        class="m-collapse-item">
                        <div class="u-collapse-header font-weight-bold">
                            <div class="flex items-center u-header">
                                <div class="flex-shrink-0 u-header-title">
                                    Q:
                                </div>
                                {{ item.title }}
                            </div>
                            <img
                                v-if="item.open"
                                src="../../assets/drop2.svg" />
                            <img
                                v-else
                                src="../../assets/drop1.svg" />
                        </div>
                        <div
                            class="u-collapse-content"
                            :style="{height: `${item.open ? 100 : 0}px`}">
                            <div class="u-text">
                                <div class="u-content-title">A:</div>
                                <div class="block overflow-hidden">
                                    {{ item.content }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "FAQ",
    data() {
        return {
            itemClass: {
                dowm: "m-collapse-item",
                open: "m-collapse-item u-collapse-item-active",
            },
            fqaList: [
                {
                    is_open: false,
                    title: "如何购买次数",
                    content:
                        "请在兑换能量表单中填写购买信息，然后根据提示向平台账户转入对应的TRX/USDT即可。",
                },
                {
                    is_open: false,
                    title: "支付成功后，能量什么时候到账？",
                    content:
                        "付款完成后，正常情况下能量会在6秒内到账。由于广播延迟等原因，极少数情况，会存在30到60秒的延迟。若没收到能量，请联系客服处理。",
                },
                {
                    is_open: false,
                    title: "同一接收地址同时可以几笔订单？",
                    content:
                        "同一地址也可以多笔购买，不限制使用次数。",
                },
                {
                    is_open: false,
                    title: "订单可以撤回吗？",
                    content:
                        "当您向平台账户支付费用后，订单不支持撤回。",
                },
            ],
        };
    },
    methods: {
        itemClick(item, index) {
            console.log(1245124123);
            this.$set(this.fqaList[index], "open", !this.fqaList[index].open);
        },
    },
};
</script>

<style scoped>
/* Add your styles here */
</style>
